import React, { useState, useEffect } from 'react';
import { motion } from 'framer-motion';

// 动画文本组件，支持多种文本动画效果
const AnimatedText = ({
  text,
  type = 'fade',
  delay = 0,
  duration = 0.5,
  color = 'inherit',
  fontSize = 'inherit',
  fontWeight = 'inherit',
  fontFamily = 'inherit',
  textAlign = 'left',
  lineHeight = 'inherit',
  ...props
}) => {
  const [displayText, setDisplayText] = useState('');
  
  // 打字效果
  useEffect(() => {
    if (type === 'typing') {
      setDisplayText('');
      let currentText = '';
      let currentIndex = 0;
      
      const typingInterval = setInterval(() => {
        if (currentIndex < text.length) {
          currentText += text.charAt(currentIndex);
          setDisplayText(currentText);
          currentIndex++;
        } else {
          clearInterval(typingInterval);
        }
      }, 50);
      
      return () => clearInterval(typingInterval);
    }
  }, [text, type]);
  
  // 文本样式
  const textStyle = {
    color,
    fontSize,
    fontWeight,
    fontFamily,
    textAlign,
    lineHeight,
    ...props.style
  };
  
  // 根据类型选择不同的动画效果
  switch (type) {
    case 'typing':
      return (
        <div style={textStyle}>
          {displayText}
          {displayText.length < text.length && (
            <span style={{ borderRight: '2px solid currentColor', animation: 'blinking 1s step-end infinite' }}>
              &nbsp;
            </span>
          )}
        </div>
      );
      
    case 'fade':
      return (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration, delay }}
          style={textStyle}
          {...props}
        >
          {text}
        </motion.div>
      );
      
    case 'slideUp':
      return (
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration, delay }}
          style={textStyle}
          {...props}
        >
          {text}
        </motion.div>
      );
      
    case 'slideDown':
      return (
        <motion.div
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration, delay }}
          style={textStyle}
          {...props}
        >
          {text}
        </motion.div>
      );
      
    case 'slideLeft':
      return (
        <motion.div
          initial={{ opacity: 0, x: 20 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration, delay }}
          style={textStyle}
          {...props}
        >
          {text}
        </motion.div>
      );
      
    case 'slideRight':
      return (
        <motion.div
          initial={{ opacity: 0, x: -20 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration, delay }}
          style={textStyle}
          {...props}
        >
          {text}
        </motion.div>
      );
      
    case 'scale':
      return (
        <motion.div
          initial={{ opacity: 0, scale: 0.8 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration, delay }}
          style={textStyle}
          {...props}
        >
          {text}
        </motion.div>
      );
      
    case 'highlight':
      return (
        <motion.div
          initial={{ backgroundColor: 'transparent' }}
          animate={{ backgroundColor: 'rgba(166, 124, 0, 0.2)' }}
          transition={{ duration: 1, delay, repeat: 1, repeatType: 'reverse' }}
          style={textStyle}
          {...props}
        >
          {text}
        </motion.div>
      );
      
    case 'wordByWord':
      return (
        <div style={{ ...textStyle, overflow: 'hidden' }}>
          {text.split(' ').map((word, index) => (
            <motion.span
              key={index}
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.3, delay: delay + index * 0.1 }}
              style={{ display: 'inline-block', marginRight: '0.25em' }}
            >
              {word}
            </motion.span>
          ))}
        </div>
      );
      
    case 'letterByLetter':
      return (
        <div style={{ ...textStyle, overflow: 'hidden' }}>
          {text.split('').map((letter, index) => (
            <motion.span
              key={index}
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.1, delay: delay + index * 0.03 }}
            >
              {letter}
            </motion.span>
          ))}
        </div>
      );
      
    case 'legal':
      return (
        <motion.div
          initial={{ opacity: 0, scale: 0.95 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration, delay }}
          style={{
            ...textStyle,
            fontFamily: fontFamily === 'inherit' ? '"Cinzel", "Noto Serif SC", serif' : fontFamily,
            textShadow: '0 1px 2px rgba(0,0,0,0.1)',
            position: 'relative',
            padding: '0 0.5em'
          }}
          {...props}
        >
          <span style={{ position: 'relative', zIndex: 1 }}>{text}</span>
          <motion.div
            initial={{ scaleX: 0 }}
            animate={{ scaleX: 1 }}
            transition={{ duration: 0.5, delay: delay + 0.2 }}
            style={{
              position: 'absolute',
              bottom: 0,
              left: '10%',
              width: '80%',
              height: '2px',
              background: 'linear-gradient(to right, transparent, currentColor, transparent)',
              transformOrigin: 'left',
            }}
          />
        </motion.div>
      );
      
    default:
      return <div style={textStyle}>{text}</div>;
  }
};

export default AnimatedText; 